<template>
	<view>
		<view>
			<table-title content="发票申请列表"></table-title>
			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view>
			<application-record v-for="(item,index) in recordList" :key="index"
				:company="item.title" :building="item.building" :time="item.time"
				:goods="item.outline" :state="item.state" @getClick="checkDetails(item.orderNum,item.status)"></application-record>
			<view v-if="choosedState === '可开票'">
				<invoice-record v-for="(item,index) in invoiceList" :key="index"
					:company="item.typeName" :time="item.createTime" :goods="item.amount" :selected="item.selected" @getClick="selectItem(index)"></invoice-record>
			</view>
			<view v-show="isLoadMore">
			  	<uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrderList,
		syncInvoiceableList,
	} from "../../..//util/network.js"
	export default{
		data() {
			return {
				choosedState : '待确认',
				navChoice: ['待确认','办理中','已办结','已驳回','可开票'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				userId:'',         //用户账号
				recordList:[],     //工单列表，eg:  见下方 recordListTestCase
				pageNo:1,
				pageSize:10,
				states:[3],
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				invoiceList:[{'typeId':0,'typeName':'空调加时','orderId':0,'amount':100,'createTime':'yyyy-mm-dd hh:mm:ss','selected':true},
				{'typeId':0,'typeName':'空调加时','orderId':0,'amount':100,'createTime':'yyyy-mm-dd hh:mm:ss','selected':false}],
			}
		},
		onNavigationBarButtonTap(){
			console.log("[info]","导航栏按钮触发监听")
			if(this.choosedState != '可开票'){
				uni.showModal({
					content:'请在可开票栏目中选择开票项目',
					showCancel:false
				})
				return 0
			}
			let list = []
			for (var i = 0; i < this.invoiceList.length; i++) {
				if(this.invoiceList[i].selected){
					list.push(this.invoiceList[i])
				}
			}
			if(list.length == 0){
				uni.showModal({
					content:'请至少选择一项',
					showCancel:false
				})
				return 0
			}
			let listStr = JSON.stringify(list)
			uni.navigateTo({
				url:'../invoiceDetails/invoiceDetails?list=' + listStr
			})
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.pageNo+=1
				this.getOrderByState('发票申请办理类',this.states)
			}
		},
		methods: {
			selectItem(index){
				this.invoiceList[index].selected = !this.invoiceList[index].selected
			},
			/*
			功能：根据单号展示工单详细页面
			参数：
			orderNum：工单号
			state：工单当前状态
		    */
			checkDetails(orderNum,state) {
				uni.navigateTo({
					url:'../details/details?id=' + orderNum + '&state=' + state
				})
			},
			
			/*
			功能：根据菜单栏选择的不同状态，渲染当前视图，并根据状态实时查询工单列表
			参数：
			*/
			changeActive(e) {
				this.pageNo = 1
				this.pageSize = 10
				this.recordList=[]
				this.invoiceList = []
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
					this.choosedState = this.navChoice[this.activeIndex]
				}
				if(this.choosedState == "可开票"){
					if(!this.isLoadMore){
						this.isLoadMore=true
						this.loadStatus='loading'
						this.getInvoiceByState('查询可开票列表',['2','2','3','6','3'])  //会议室 空调 付费 维修 缴费
					}
				}else{
					switch(this.choosedState) {
					     case "待确认":
						    this.states = [3]
					        break;
					     case "办理中":
						    this.states = [0,1,2]
					        break;
						 case "已办结":
							this.states = [4]
						    break;
						 case "已驳回":
							this.states = [5]
						    break;
						 case "全部":
							this.states = [0,1,2,3,4,5]
						    break;
					     default:
					        itemTmp.state = "全部"
					} 
					if(!this.isLoadMore){
						this.isLoadMore=true
						this.loadStatus='loading'
						this.getOrderByState('detail',this.states)
					}
				}

			},
			listPush(item){
				let itemTmp = {'orderNum':'','title':'发票办理','building':'','time':'',
				'outline':'','status':-1, 'state':''}
				itemTmp.orderNum = item.id
				itemTmp.time = item.updateTime.replace('T',' ')
				itemTmp.outline ="消费金额：" + JSON.parse(item.orderInfo).amount + ' 元'
				itemTmp.title = JSON.parse(item.orderInfo).typeName
				itemTmp.status = item.status
				switch(item.status) {
				     case 0:
				        itemTmp.state = "待管家审核"
				        break;
				     case 1:
				        itemTmp.state = "待财务办理"
				        break;
					 case 2:
				        itemTmp.state = "待管家派送"
					    break;
					 case 3:
				        itemTmp.state = "待用户确认"
					    break;
					 case 4:
				        itemTmp.state = "已办结"
					    break;
				     case 5:
				        itemTmp.state = "管家已驳回"
				        break;
					 default:
				        itemTmp.state = "全部"
				} 
				this.recordList.push(itemTmp)
				
			},
			/*
			功能：根据工单类别及状态实时查询工单列表
			参数：
			orderType：工单类别
			state：工单当前状态
		    */
			getOrderByState(orderType,state){
				let a = syncGetOrderList("invoice/list", state, this.pageNo, this.pageSize)
				 a.then((res)=>{
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.invoiceList.length; i++) {
							this.listPush(res.data.data.invoiceList[i])
						}
						if(res.data.data.invoiceList.length <= 0){
							this.isLoadMore = false
						}else{
							this.isLoadMore = false
							this.loadStatus = 'nomore'
						}
					}else {
						this.isLoadMore = false
						uniRedirect('/login/login')
						console.log("[info]","请求失败请检查网络情况")
					}
				})
			},
			getInvoiceByState(orderType,state){  //0：空调加时单 1：会议室预定单 2：维修服务单 3：收费服务单
				let a = syncInvoiceableList("invoice/available-list", state, this.pageNo, this.pageSize)
				 a.then((res)=>{
					 console.log(res)
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.invoiceAvailableList.length; i++) {
							let temp = res.data.data.invoiceAvailableList[i]
							temp.createTime = temp.createTime.replace('T', ' ')
							if(temp.typeName == "收费服务"){
								temp.typeName = temp.paidServiceTitle
							}
							if(temp.typeName == "缴费服务"){
								temp.typeName = temp.paymentNoticeTitle
							}
							temp.selected = false
							this.invoiceList.push(temp)
						}
						if(res.data.data.invoiceAvailableList.length <= 0){
							this.isLoadMore = false
						}else{
							this.isLoadMore = false
							this.loadStatus = 'nomore'
						}
					}else {
						this.isLoadMore = false
						uniRedirect('/login/login')
						console.log("[info]","请求失败请检查网络情况")
					}
				})
			},
		},

		mounted() {
			console.log("[info]","测试初始化" + uni.getStorageSync('userinfo'))
			if(uni.getStorageSync('userinfo') != null){
				// this.getOrderByState('发票申请办理类',[3])
			}else{
				uni.navigateTo('../../login/login')
			}

		},
		onShow() {
			if(this.choosedState == "可开票"){
				this.invoiceList = []
				if(!this.isLoadMore){
					this.isLoadMore=true
					this.loadStatus='loading'
					this.getInvoiceByState('查询可开票列表',['2','2','3','6','3'])  //会议室 空调 付费 维修 缴费
				}
			}else{
				if(!this.isLoadMore){
					this.isLoadMore = true
					this.pageNo = 1
					this.pageSize = 10
					this.recordList=[]
					this.getOrderByState('onShow',this.states)
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.nav-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
</style>
